<template>
  <!-- 生成二维码开放接口:
            二维码内容[通常为url]
           二维码大小[限制为正方形]
　　　　　 二维码下方显示：文字
         -->
  <div>
    <div class="meQrcode" :title="qrText">
      <div class="qrcode_box">
        <img class="qrcode_canvas" id="qrcode_canvas" ref="qrcode_canvas" alt="二维码本图" />
        <canvas :width="qrSize" :height="qrSize" class="canvas" ref="canvas"></canvas>
      </div>
    </div>
  </div>
</template>
<script>
  import QRCode from 'qrcode';
  export default {
    props: {
      qrUrl: {
        type: String,
        default: '',
      },
      qrSize: {
        type: Number,
        default: 300,
      },
      qrText: {
        default: '',
      },
      qrTextSize: {
        type: Number,
        default: 14,
      },
    },
    data() {
      return {};
    },
    methods: {
      /**
       * @argument qrUrl        二维码内容
       * @argument qrSize       二维码大小
       * @argument qrText       二维码中间显示文字
       * @argument qrTextSize   二维码中间显示文字大小(默认16px)
       */
      handleQrcodeToDataUrl() {
        let qrcode_canvas = this.$refs.qrcode_canvas;
        let canvas = this.$refs.canvas;
        QRCode.toDataURL(this.qrUrl, { errorCorrectionLevel: 'H' }, (err, url) => {
          qrcode_canvas.src = url;
          // 在canvas里进行拼接
          let ctx = canvas.getContext('2d');
          setTimeout(() => {
            ctx.drawImage(qrcode_canvas, 0, 0, this.qrSize, this.qrSize - 10);
            if (this.qrText) {
              //设置字体
              let fpadd = 10; //规定内间距
              ctx.font = 'bold ' + this.qrTextSize + 'px Arial';
              let tw = ctx.measureText(this.qrText).width; //文字真实宽度
              let ftop = this.qrSize - this.qrTextSize; //根据字体大小计算文字top
              let fleft = (this.qrSize - tw) / 2; //根据字体大小计算文字left
              let tp = this.qrTextSize / 2; //字体边距为字体大小的一半可以自己设置
              ctx.fillStyle = '#fff';
              ctx.fillRect(fleft - tp / 2, ftop - tp / 2, tw + tp, this.qrTextSize + tp);
              ctx.textBaseline = 'top'; //设置绘制文本时的文本基线。
              ctx.fillStyle = '#333';
              ctx.fillText(this.qrText, fleft, ftop);
            }
            qrcode_canvas.src = canvas.toDataURL();
          }, 0);
        });
      },
    },
    mounted() {
      this.handleQrcodeToDataUrl();
    },
    updated() {
      this.handleQrcodeToDataUrl();
    },
  };
</script>
<style lang="less">
  .qrcode_box,
  .meQrcode {
    display: inline-block;
  }
  .qrcode_box img {
    display: none;
  }
</style>
